<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        ul,ol{list-style-type: none;padding-left: 0;}
        .banner_wrap{
            position: relative;
            overflow: hidden;
            width: 500px;
            height: 246px;
            margin: 10px auto;
            user-select: none;
        }
        .banner_wrap .banner_img{
            position: relative;
        }
        .banner_wrap ul li{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: .3s;
        }
        .banner_wrap ul li.show{
            opacity: 1;
        }
        .banner_wrap ul li img{
            width: 500px;
            height: 245px;
        }
        .group_btn{
            position: absolute;
            z-index: 999;
            left: 0;
            top: 50%;
            right: 0;
            margin: 0;
            margin-top: -25px;
        }
        .group_btn .btn{
            width: 50px;
            height: 50px;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }
        .group_btn .btn:hover{
            background-color: rgba(0,0,0,.5);
        }
        .prev_btn{
            float: left;
        }
        .next_btn{
            float: right;
        }
    </style>
</head>
<body>
    <div class="banner_wrap">
        <div class="banner_img">
            <ul>
                <li class="show"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aCFprmfjJOxu9GV6hh5bCgHaCs?w=342&h=127&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
                <li><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.7K8JgOSqIRa8ptYOU6OUpgHaDd?w=342&h=163&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
                <li><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.kWTuE4H56dkVStTMEfTwwwHaDt?w=339&h=175&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
                <li><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.N6MSuD9qr2q_DsVFbLBKCwHaFI?w=295&h=204&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
                <li><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.DqY0fuQcUq5nQTuJJrpdOgHaFK?w=255&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
            </ul>
        </div>
        <div class="group_btn">
            <!-- &lt;生成向左的箭头   &gt;生成向右的箭头 -->
            <div class="prev_btn btn">&lt;</div>
            <div class="next_btn btn">&gt;</div>
        </div>
    </div>
    <script>
        /*
            实现步骤：
            1.点击next,当前展示的图片消失(删除show类名)，切换展示下一张图片
            2.点击prev,切换展示上一张图片
            3.到底和到顶，需要进行循环
        */
       let aBannerLi = document.querySelectorAll(".banner_wrap .banner_img li"),
                       len = 5,
                       btnPrev = document.querySelector(".group_btn .prev_btn"),
                       btnNext = document.querySelector(".group_btn .next_btn"),
                       i = 0;//下标
        
        btnPrev.onclick = function (){
            aBannerLi[i].classList.remove("show")
            if(i > 0){
                i--
            }
            else{
                i = 4;
            }
            aBannerLi[i].classList.add("show")
        }
        btnNext.onclick = function (){
            aBannerLi[i].classList.remove("show")
            i++
            i %= len
            aBannerLi[i].classList.add("show")
        }
    </script>
</body>
</html>